<template>
  <main-wrap>
    <div class="head">
      <!-- <div class="txwrap" :style="'background-image: url(' + (user_info.avatarUrl ? user_info.avatarUrl : require('imgs/Desert.jpg')) + ')'"></div> -->
      <img :src="txsrc">
      <h4>{{user_info.deptNames}}-{{user_info.name}}</h4>
      <p>{{user_info.roleValues}}</p>
    </div>
    <div class="weui-cells">
      <router-link class="weui-cell weui-cell_access" :to="ordersurl">
          <div class="weui-cell__bd">
              <p>历史服务单</p>
          </div>
          <div class="weui-cell__ft">
          </div>
      </router-link>
      <router-link v-if="rolecode !== '4' && roletype === '1'" class="weui-cell weui-cell_access" to="/arrange">
          <div class="weui-cell__bd">
              <p>排班</p>
          </div>
          <div class="weui-cell__ft">
          </div>
      </router-link>
      <router-link v-if="rolecode !== '4' && roletype === '1'" class="weui-cell weui-cell_access" to="/patrollist">
          <div class="weui-cell__bd">
              <p>巡检</p>
          </div>
          <div class="weui-cell__ft">
          </div>
      </router-link>
      <div v-if="rolecode !== '4'" class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <p>转为用户角色</p>
        </div>
        <div class="switchWrap">
          <van-switch
            :value="checked"
            size="28px"
            active-color="#4c84c4"
            inactive-color="#f7f7fa"
            @input="onInput"
          />
        </div>
      </div>
    </div>
    <my-tab-bar :curtab="1" v-if="showTab"></my-tab-bar>
  </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
import MyTabBar from '@/components/mytabbar'
import { mapState } from 'vuex'
export default {
  name: 'Me',
  components: {
    MainWrap,
    MyTabBar
  },
  data () {
    return {
      // txsrc: require('imgs/小头像@2x.png'),
      rolecode: localStorage.rolecode ? localStorage.rolecode : '0',
      roletype: localStorage.roletype ? localStorage.roletype : '1',
      showTab: true // 用于刷新tab
    }
  },
  computed: {
    ...mapState(['user_info']),
    checked: {
      get () {
        return this.roletype === '0'
      },
      set () {}
    },
    ordersurl: {
      get () {
        return (this.rolecode !== '4' && this.roletype === '1') ? '/morders' : '/orders'
      },
      set () {}
    },
    txsrc () {
      return this.cm.getAvatar(this.user_info.avatarUrl)
    }
  },
  methods: {
    onInput (checked) {
      this.showTab = false
      this.$nextTick(() => {
        this.showTab = true
      })

      this.checked = checked
      if (checked) {
        // 用户端页面
        this.roletype = '0'
        localStorage.roletype = '0'
        this.ordersurl = '/orders'
      } else {
        // 工人端页面
        this.roletype = '1'
        localStorage.roletype = '1'
        this.ordersurl = '/morders'
      }

      this.cm.myajax('/api/login/switchRole', {
        roleType: this.roletype
      }, (data) => {})
    }
  }
}
</script>

<style lang="stylus" scoped>
.head
  padding 15px 0
  text-align center
  background #4f77aa
  img
    width 1.2rem
    height 1.2rem
    border-radius 50%
  h4
    font-size 17px
    line-height 28px
    color white
  p
    font-size 14px
    line-height 22px
    color rgba(255, 255, 255, 0.46)

.switchWrap
  display flex
  align-items center
</style>
